<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于SSM的网上教学系统</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--    <link rel="stylesheet" href="/css/feng.css">-->
    <style type="text/css">
        .login {
            height: 395px;
            width: 434px;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            z-index: 99;
        }

        a {
            width: 190px;
            margin: auto;
        }

        .carousel {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 90;
            background-color: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div class="layui-carousel carousel" lay-filter="carousel" id="carousel">
    <div carousel-item="">
        <div><img src="/images/bg.jpeg" width="1920px"></div>
        <div><img src="/images/bg2.jpeg" width="1920px"></div>
    </div>

    <div class="layui-container login">
        <div style="padding: 10px"><h1 style="color: #FFFFFF">基于SSM的网上教学系统</h1></div>
        <form id="loginForm" class="layui-form" layui-formpane>
            <select name="roleId" id="roleList">
            </select>
            <br>
            <input type="text" name="username" lay-verify="required" placeholder="请输入账号"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="text" name="name" lay-verify="required" placeholder="请输入姓名"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="password" name="repassword" lay-verify="required" placeholder="确认密码"
                   autocomplete="off" class="layui-input">
            <br>
            <a class="layui-btn layui-btn-normal" lay-filter="submit" lay-submit="" id="submit">注册</a>
            <a class="layui-btn layui-btn-warm" href="/index/login">登录</a>
        </form>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.use(['layer', 'form', 'jquery', 'carousel'],
        function () {
            let layer = layui.layer;
            let form = layui.form;
            let $ = layui.jquery;
            let carousel = layui.carousel; // 轮播图

            CoreUtil.sendAjax("/study/role", {}, function (res) {
                let indicators = $("#roleList");
                res.map(value => {
                    indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                })
                form.render()
            }, "GET", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
                let noAuthorityData = [];
            });
            form.on('submit(submit)', function (data) {
                if (data.field.password !== data.field.repassword) {
                    layer.msg("两次输入密码不一致！！")
                    return
                }
                $.ajax({
                    "url": "/study/user/registered",
                    "method": "POST",
                    "data": JSON.stringify(data.field),
                    "contentType": 'application/json; charset=UTF-8',
                    "dataType": "json",
                    success: function (res) {
                        window.location.href = "/index/login";
                    },
                    error: function (error) {
                        layer.msg(error.responseJSON.message)
                    }
                });
            });
            //改变下时间间隔、动画类型、高度
            carousel.render({
                elem: '#carousel'
                , interval: 2000
                , anim: 'fade'
                , full: true //全屏
                , width: '100%'
                , arrow: 'none'
            });
        }
    );
</script>
</body>
</html>